import * as React from 'react';
import { Link } from 'react-router-dom';
import { Topic } from '../interface/index';

interface Props {
  key: string;
  item: Topic;
}

interface TabMap {
  ask: string;
  share: string;
  job: string;
  [key: string]: string;
}

const tabMap: TabMap = { ask: '问答', share: '分享', job: '职场' };

class TopicItem extends React.Component<Props, {}> {
  shouldComponentUpdate() {
    return true;
  }
  displayDetail = () => {
    this.setState({ showDetail: true });
  }
  render() {
    const { title, top, good, create_at, author, tab, id } = this.props.item;
    const getButton = (top: boolean, good: boolean, tab: string) => {
      if (top) {
        return <div className="item-info-top">置顶</div>;
      } else if (good) {
        return <div className="item-info-top">精华</div>;
      }
      return <div className="item-info-tab">{tabMap[tab]}</div>;
    };
    return (
      <Link to={`/detail/${id}`}>
        <div className="item" onClick={this.displayDetail}>
          <div className="item-title">{title}</div>
          <div className="item-info">
            <div className="item-info-left">
              {getButton(top, good, tab)}
              <div>{author.loginname}</div>
            </div>
            <div>{new Date(create_at).toLocaleDateString()}</div>
          </div>
        </div>
      </Link>

    );
  }
}

export default TopicItem;

